<template>
  <div class="containe">
    <div class="waterfall" ref="waterfall">
      <div class="image-box" v-for="(img,index) in imageList" :key="index">
        <img :src="img.url" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      timer: null,
      baseHeight: 200, // 图片的基础计算高度
      imgList: [], // 用二维数据保存每一行数据
      rowWidth: 0, // 每行的图片宽度
      rowCount: 0, // 每行的索引
      imageList: [
        { url: require('../assets/1.jpg') },
        { url: require('../assets/2.jpg') },
        { url: require('../assets/3.jpg') },
        { url: require('../assets/4.jpg') },
        { url: require('../assets/5.jpg') },
        { url: require('../assets/6.jpg') },
        { url: require('../assets/7.jpg') },
        { url: require('../assets/8.jpg') },
        { url: require('../assets/9.jpg') },
        { url: require('../assets/10.jpg') },
        { url: require('../assets/11.jpg') },
        { url: require('../assets/12.jpg') },
        { url: require('../assets/13.jpg') },
        { url: require('../assets/14.jpg') },
        { url: require('../assets/15.jpg') },
        { url: require('../assets/16.jpg') },
        { url: require('../assets/17.jpg') },
      ],
    };
  },
  mounted() {
    window.addEventListener('resize', this.resizeHandler);
  },
  methods: {
    resizeHandler() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        // this.windowSizeChanged();
        console.log(this.$refs.waterfall.clientWidth);
        this.timmer = null;
      }, 200);
    },
  },
};
</script>

<style scoped lang="scss">
.waterfall {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  // height: 500px;
  border: 1px solid #000;
  overflow: hidden;
  .image-box {
    flex-grow: 1;
  }
  img {
    display: block;
    min-width: 100%;
    height: 200px;
    object-fit: cover;
  }
  &:after {
    content: '';
    display: block;
    flex-grow: 99999;
  }
}
</style>
